<template>
  <div class="push-settings">

    <!-- 表单区域 -->
    <van-form @submit="handleSubmit" class="form-container">
      <!-- 头部导航 -->
      <van-cell-group title="推送开关">
        <van-cell center title="是否开启消息推送">
          <template #right-icon>
            <van-switch @change="handleCheck" v-model="form.checked" />
          </template>
        </van-cell>
      </van-cell-group>
      <!-- 推送频率 -->
      <van-cell-group title="推送频率">
        <van-radio-group v-model="form.frequency" direction="horizontal">
          <van-radio name="daily">每日</van-radio>
          <van-radio name="weekly">每周</van-radio>
          <van-radio name="monthly">每月</van-radio>
        </van-radio-group>
      </van-cell-group>

      <!-- 推送时间选择 -->
      <van-cell-group title="推送时间">
        <van-field v-model="form.pushTime" is-link readonly label="选择时间" placeholder="点击选择时间"
          @click="showTimePicker = true" />
        <van-popup v-model:show="showTimePicker" round position="bottom">
          <van-time-picker v-model="currentTime" type="time" title="选择推送时间" @confirm="handleTimeConfirm"
            @cancel="showTimePicker = false" />
        </van-popup>
      </van-cell-group>

      <!-- 手机验证 -->
      <van-cell-group title="接收设置">
        <van-field clearable v-model="form.phone" label="手机号码" placeholder="请输入11位手机号"
          :rules="[{ validator: phoneValidator, message: '手机号格式错误' }]">
          <template #button>
            <van-button size="small" :disabled="codeCooldown > 0" @click="sendSmsCode">
              {{ codeCooldown > 0 ? `${codeCooldown}s后重发` : '发送验证码' }}
            </van-button>
          </template>
        </van-field>

        <van-field v-model="form.verifyCode" label="验证码" placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]" />
      </van-cell-group>

      <!-- 提交按钮 -->
      <div class="submit-btn">
        <van-button round block type="primary" native-type="submit">
          保存设置
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { showToast, showFailToast } from 'vant'
import { DatePicker } from 'vant';
import { TimePicker } from 'vant';
const form = reactive({
  frequency: 'daily',
  pushTime: '08:00',
  phone: '15570100447',
  verifyCode: '5555',
  checked: false
})

const showTimePicker = ref(false)
const currentTime = ref(['12', '00'])
const codeCooldown = ref(0)

// 手机号验证
const phoneValidator = (val) => /^1[3-9]\d{9}$/.test(val)

// 发送验证码
const sendSmsCode = async () => {
  if (!phoneValidator(form.phone)) {
    showFailToast('手机号格式错误');
    return
  }

  // 调用发送接口
  try {
    codeCooldown.value = 60
    const timer = setInterval(() => {
      if (codeCooldown.value <= 0) {
        clearInterval(timer)
        return
      }
      codeCooldown.value--
    }, 1000)
    showSuccessToast('验证码已发送');
  } catch (error) {
    showFailToast('发送失败，请重试');
  }
}

// 时间选择确认
const handleTimeConfirm = (value) => {
  form.pushTime = value.selectedValues[0].toString() + ':' + value.selectedValues[1].toString()
  showTimePicker.value = false
}

//点击开关
const handleCheck = (e) => {
  console.log(e);

}

// 表单提交
const handleSubmit = async () => {
  if (!form.verifyCode) {
    return  showToast({
      message: '请填写验证码',
      icon: 'warning-o',
    });
  }

  if (!form.checked) {
    return  showToast({
      message: '请开启推送按钮',
      icon: 'warning-o',
    });
  }

  try {
    // 调用保存接口
    showSuccessToast('保存成功');
  } catch (error) {
    showToast('保存失败')
  }
}
</script>

<style lang="scss" scoped>
.push-settings {
  background: #f7f8fa;
  min-height: 100vh;

  :deep(.van-nav-bar) {
    background: #fff;

    .van-nav-bar__left {
      padding-left: 12px;
    }
  }

  .form-container {
    padding: 16px;

    :deep(.van-cell-group__title) {
      font-size: 16px;
      font-weight: 600;
      color: #969799;
      text-align: left;
    }

    :deep(.van-cell__title) {
      flex: none;
    }

    :deep(.van-cell--center) {
      display: flex;
      justify-content: space-between;
    }

    .van-radio-group {
      padding: 8px 16px;

      .van-radio {
        margin-right: 24px;
      }
    }

    .van-field {
      background: #fff;
      border-radius: 8px;
      margin: 8px 0;
    }

    .submit-btn {
      margin: 32px 16px 0;

      .van-button {
        background: linear-gradient(135deg, #07c160, #06ad56);
        border: none;
      }
    }
  }
}
</style>